img{
    width: 100%;
    height: 100%;
}
body{
    background: url(../../assets/images/225539-156527613945d6.jpg) no-repeat;
    background-size: cover;
}
.currentLine,.currentMusic{
    background: #a1ffce;  /* fallback for old browsers */      background: -webkit-linear-gradient(to right, rgb(161, 255, 206), rgb(250, 255, 209));  /* Chrome 10-25, Safari 5.1-6 */      background: linear-gradient(to right, rgb(161, 255, 206), rgb(250, 255, 209)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */      
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text ;
    font-size: 22px !important;
    font-weight: 800 !important;
}
.currentMusic{
    font-size: 16px !important;
}
.audioPage{
   overflow: hidden;
  .audioPage-box{
    .header{
        width: 1500px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .logo{
            width: 170px;
            height: 55px;
        }
        .right-box{
            display: flex;
            align-items: center;
            width: 700px;
            justify-content: space-around;
            position: relative;
            #chooseTheme{
                width: 20vw;
                height: 4vh;
                box-shadow: 0 0 5px gray;
                transition: all 0.5s;
                position: absolute;
                top: 21px;
                left: -413px;
                padding: 15px;
                ul{
                    display: flex;
                    flex-wrap: wrap;
                        justify-content: space-around;
                        align-items: center;
                    li{
                        cursor: pointer;
                        .img-box{
                            width: 30px;
                            height: 30px;
                        }
                    }
                }
            }
            .changBlack{
                width: 27px;
                height: 24px;
                cursor: pointer;
            }
            .changRevel{
                width: 58px;
                height: 25px;
                cursor: pointer;

            }
        }
    }
    .mod-player{
        height: 70vh;
        display: flex;
        justify-content: space-between;
        .mod-player-inner{
            width: 20vw;
            display: flex;
            align-items: center;
            justify-content: center;
            .songer-info{
                width: 190px;
                height: 300px;
                .img-box{
                    width: 190px;
                    height: 190px;
                    position: relative;
                    img{
                        position: relative;
                        z-index: 5;
                    }
                    &::after,&::before{
                        content: "";
                        width: 87%;
                        height: 87%;
                        background-color: rgba(225, 225, 231, 0.9);
                        position: absolute;
                        top: 14px;
                        right: -6px;
                        z-index: 1;
                        transition: all 0.4s;
                        border-radius: 2px;
                    }
                    &::before{
                        width: 77%;
                        height: 77%;
                        position: absolute;
                        background-color: #d5d5d5;
                        top: 22px;
                        right: -10px;
                    }
                    &:hover{
                        &::before{
                            position: absolute;
                            right: -18px;
                            background-color: rgba(218, 212, 212, 0.7);
                        }
                        &::after{
                            position: absolute;
                            right: -10px;
                            background-color: rgba(241, 171, 171, 0.7);
                        }
                    }
                }
                .singer-content-box{
                    text-align: center;
                    color: #fff;
                    font-weight: 800;
                    >div{
                        margin-top: 15px;
                    }
                }
            }
        }
        .song-info-lyric{
            width: 55vw;
            padding-top: 100px;
            .hidden-lyricBox{
                width: 100%;
                height: 580px;
                color: gray;
                overflow: hidden;
                padding: 15px;
                text-align: center;
                // box-shadow: 0 0 5px gray;
                // background-color: rgba($color: #000000, $alpha: 0.5);
                .lyric-info{
                    overflow: hidden;
                    .lineLyric{
                        transform: translateY(0px);
                        transition: all 0.5s;
                        span{
                            display: block;
                            height: 26px;
                        line-height: 26px;
                        font-size: 15px;
                        margin-bottom: 16px;
                        }
                    }
                  
                }
              
            }
        }
        .temp_list{
            width: 25vw;
      
            display: flex;
            align-items: center;
            .hidden-music-box{
                .box-list{
                    height: 500px;
                    overflow-y:scroll ;
                    // -ms-overflow-style: none;
                    ul{
                        li{
                            display: flex;
                            justify-content: space-between;
                           position: relative;
                            padding: 15px 10px;
                            width: 25vw;
                            box-sizing: border-box;
                            color: #fff;
                            cursor: pointer;
                            p{
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                overflow: hidden;
                            }
                            .listNumber{
                                width: 5%;
                                text-align: center;
                            }
                            .hidden-play{
                               
                                width: 5%;
                                height: 20px;
                                text-align: center;
                                display: none;
                            }
                            .item-name{
                                width: 50%;
                            }
                            .item-artists{
                                width: 35%;
                            }
                            .item-time{
                                width: 10%;
                                .img-box{
                                    width: 25px;
                                    height: 25px;
                                    background: url('../../assets/images/musicing.gif') no-repeat;
                                    background-position: 9px -16px;
                                }
                            }
                            .hidden-delete{
                                display: none;
                                position: absolute;
                                right: 87px;
                                top: 8px;
                                .img-box{
                                    width: 30px;
                                    height: 30px;
                                }
                            }
                            &:hover{
                                color: #a1ffce;
                                background-color: rgba($color: #000000, $alpha: 0.3);
                              .hidden-delete{
                                display: block;
                              }
                              .listNumber{
                                  display: none;
                              }
                              .hidden-play{
                                  display: block;
                              }
                            }
                        }
                    }
                }
            }
        }
    }
    .footer-playMusic-box{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 1400px;
        margin:  auto;
        height: 100px;
        position: absolute;
        right: 0;
        left: 0;
        bottom: 0;
        .play-model{
            display: flex;
            width: 180px;
            height: 72px;
            align-items: center;
            >div{
                width: 50px;
                height: 50px;
               cursor: pointer;
               margin: 5px;
            }
        }
        .play-music{
            margin: 0 50px;
            height: 100%;
            .current-time{
                box-sizing: border-box;
                text-align: right;
                height: 47px;
                padding: 7px 19px 0 0;
                font-size: 16px;
                color: #fff;
            }
            .progress-bar-warp{
                width: 700px;
                margin: 0 20px;
                .progress-bar{
                    width: 100%;
                    height: 3px;
                    border-radius: 10px;
                    background-color: #fff;
                    .bar-inner{
                        //进度条
                        height: 3px;
                        position: relative;
                        width: 0px;
                        background: #fc00ff;  /* fallback for old browsers */      background: -webkit-linear-gradient(to right, rgb(252, 0, 255), rgb(0, 219, 222));  /* Chrome 10-25, Safari 5.1-6 */      background: linear-gradient(to right, rgb(252, 0, 255), rgb(0, 219, 222)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */      
                        .progress{
                            height: 3px;
                            width: 0px;
                            background: #fc00ff;  /* fallback for old browsers */      background: -webkit-linear-gradient(to right, rgb(252, 0, 255), rgb(0, 219, 222));  /* Chrome 10-25, Safari 5.1-6 */      background: linear-gradient(to right, rgb(252, 0, 255), rgb(0, 219, 222)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */      
                        }
                        .progress-btn{
                            position: absolute;
                            width: 15px;
                            height: 15px;
                            top: -8px;
                            right: 0px;
                            border-radius: 50%;
                            background-color: #fff;
                            border: 2px solid #fc00ff;
                            transition: all 0.2s;
                            cursor: pointer;
                            &:hover{
                                transform: scale(1.1);
                            }
                        }
                    }
                }
            }
            audio{
                width: 800px;
                background-color: white;
                
            }
            
        }
        .musicVoice{
            width: 200px;
            display: flex;
            align-items: center;
           
            .img-box{
                width: 25px;
                height: 25px;
                margin-right: 15px;
                cursor: pointer;
            }
            .controlVoice{
                width: 135px;
            }
        }
    }
  }
  #bgBanner {
    position: fixed;
    right: 0px;
    bottom: 0px;
    min-width: 100%;
    min-height: 100%;
    height: auto;
    width: auto;
    z-index: -99;
    filter: blur(15px); //背景模糊设置 
            /*-webkit-filter: grayscale(100%);*/  
}
#mubu{
    position: fixed;
    right: 0px;
    bottom: 0px;
    min-width: 100%;
    min-height: 100%;
    height: auto;
    width: auto;
    z-index: -50;
    background-color: rgba($color: #fff, $alpha: 1.0);
}
}
